import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomeTabBarFive extends StatefulWidget {
  HomeTabBarFive({Key? key}) : super(key: key);

  @override
  _HomeTabBarFiveState createState() => _HomeTabBarFiveState();
}

class _HomeTabBarFiveState extends State<HomeTabBarFive> {
  List _list = [
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image1.png',
      'title': '电影《门锁》发布独居入侵版预告',
      'name': '门锁',
      'number': '101',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image2.png',
      'title': '《007:无暇赴死》特辑 丹尼尔·克雷格完美谢幕',
      'name': '007:无暇赴死',
      'number': '11',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image3.png',
      'title': '《不要忘记我爱你》首曝预告 娜扎浪漫表白刘以豪',
      'name': '不要忘记我爱你',
      'number': '74',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image4.png',
      'title': '《乌海》杨子姗特辑 对吵黄轩“虐”哭导演周子扬',
      'name': '乌海',
      'number': '12',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image5.png',
      'title': '《麦克白的悲剧》信誉高 影片改编自莎翁戏剧',
      'name': '麦克白的悲剧',
      'number': '13',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image6.png',
      'title': '《第五届背景纪实影像周》特辑 展映主题混剪短片',
      'name': '第五届背景纪实影像周',
      'number': '17',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image7.png',
      'title': '《沙丘》全宇宙哦最惨！一觉醒来家门被灭，星际少年觉醒逆袭',
      'name': '沙丘',
      'number': '432',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image8.png',
      'title': '《野马分鬃》重新定档11月26日 发布“越玩越野”',
      'name': '野马分鬃',
      'number': '54',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image9.png',
      'title': '《超能一家人》没有正常人预告 沈腾一字马出场恭迎艾伦',
      'name': '超能一家人',
      'number': '10',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image10.png',
      'title': '电影《门锁》发布独居入侵版预告',
      'name': '门锁',
      'number': '144',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image11.png',
      'title': '《我和我的父辈》曝片段 吴京儿子出镜上阵“父子兵”',
      'name': '我和我的父辈',
      'number': '284',
    },
    {
      'imagrUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image12.png',
      'title': '《第一炉香》曝终极预告 10月22日全国献映',
      'name': '第一炉香',
      'number': '356',
    },
  ];
  @override
  Widget build(BuildContext context) {
    List<Widget> _widgetList = [];
    _list.forEach((value) {
      _widgetList.add(_widgetBig(
          value['imagrUrl'], value['title'], value['name'], value['number']));
    });
    return SingleChildScrollView(
      child: Container(
        color: Color(0xFFf5f5f5),
        child: Stack(
          children: [
            Column(
              children: [
                Container(
                  height: 150.h,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Color(0xFF2b358e),
                  ),
                ),
                Container(
                  height: 50.h,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Color(0xFF2b358e),
                          Color(0xFFf5f5f5),
                        ]),
                  ),
                ),
              ],
            ),
            Column(
              children: [
                _tab(),
                Container(
                  child: Column(
                    children: _widgetList,
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _tab() {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.fromLTRB(10.w, 5.h, 10.w, 0),
          height: 100.h,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.r),
            image: DecorationImage(
              fit: BoxFit.fill,
              image: CachedNetworkImageProvider(
                  'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_five/image0.png'),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.fromLTRB(15.w, 10.h, 15.w, 5.h),
          child: Row(
            children: [
              Text(
                '1.3',
                style: TextStyle(fontSize: 13.sp, color: Colors.white),
              ),
              Text(
                ' 亿次播放    ',
                style: TextStyle(fontSize: 11.sp, color: Colors.grey),
              ),
              Text(
                '291',
                style: TextStyle(fontSize: 13.sp, color: Colors.white),
              ),
              Text(
                ' 个精选视频',
                style: TextStyle(fontSize: 11.sp, color: Colors.grey),
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _widgetBig(String imageUrl, String text1, String text2, String num) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.r), color: Color(0xFFffffff)),
      margin: EdgeInsets.only(left: 8.w, right: 8.w, bottom: 10.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Container(
                height: 170.h,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.r),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: CachedNetworkImageProvider(imageUrl),
                  ),
                ),
              ),
              Positioned(
                left: 140.w,
                top: 70.h,
                child: Icon(
                  Icons.play_circle_outline,
                  size: 35.sp,
                  color: Colors.black,
                ),
              )
            ],
          ),
          SizedBox(height: 5.h),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 10.w, vertical: 5.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  text1,
                  style: TextStyle(color: Colors.black, fontSize: 13.sp),
                ),
                SizedBox(height: 5.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      text2,
                      style: TextStyle(color: Colors.grey, fontSize: 12.sp),
                    ),
                    Text(
                      num,
                      style: TextStyle(color: Colors.grey, fontSize: 12.sp),
                    ),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
